<template>
  <div>
    <div class="main">
      <eagle-input
        label="事故名称"
        v-model="form.AccidentName"
        name="AccidentName"
        type="textarea"
        autosize
        rows="1"
        readonly
      >
      </eagle-input>
      <eagle-input
        label="事故编号"
        v-model="form.IncidentNumber"
        name="IncidentNumber"
        readonly
      >
      </eagle-input>
      <eagle-input
        label="事故发生部门"
        v-model="form.AccidentDepartmentName"
        name="AccidentDepartmentName"
        readonly
      ></eagle-input>
      <eagle-input
        label="事故日期"
        :value="form.AccidentDate|formatDateTime"
        readonly
      ></eagle-input>
      <eagle-input
        label="事故简介"
        v-model="form.Remarks"
        type="textarea"
        rows="1"
        autosize
        readonly
      />
      <eagle-input
        label="立即采取的行动"
        v-model="form.TakeImmediateAction"
        type="textarea"
        rows="1"
        autosize
        readonly
      />
      <eagle-radio-group
        name="ProcessClassification"
        label="工艺分类"
        v-model="form.ProcessClassification"
        :dataSource="form.ProcessClassificationList"
        direction="horizontal"
        readonly
      >
      </eagle-radio-group>
      <eagle-radio-group
        name="AttidentClassification"
        label="事故分类"
        :show="form.ProcessClassification == 'A'"
        v-model="form.AttidentClassification"
        :dataSource="form.AccidentProcessList"
        direction="horizontal"
        readonly
      >
      </eagle-radio-group>
      <eagle-radio-group
        name="AttidentClassification"
        label="事故分类"
        :show="form.ProcessClassification == 'B'"
        v-model="form.AttidentClassification"
        :dataSource="form.AccidentFreeProcessList"
        direction="horizontal"
        readonly
      >
      </eagle-radio-group>
      <eagle-checkgroup
        v-show="isShow(1)"
        v-model="harmArr"
        :dataSource="form.HarmList"
        label="伤害/职业病"
        :option="{label:'Name',value:'ID'}"
        direction="horizontal"
        class="input_text"
        readonly
      ></eagle-checkgroup>
      <eagle-input
        v-if="isShow(2)"
        label="火灾爆炸涉及范围"
        v-model="form.InvolveScope"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        v-if="isShow(3)"
        label="环境污染范围"
        v-model="form.PolluteScope"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        v-if="isShow(4)"
        label="泄露物质"
        v-model="form.RevealMatter"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        v-if="isShow(4)"
        label="泄露量"
        v-model="form.Spillage"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        v-if="isShow(5)"
        label="生产异常影响范围"
        v-model="form.SphereInfluence"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        v-if="isShow(7)"
        label="直接财产损失"
        v-model="form.DirectPropertyLoss"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-radio-group
        name="AttidentgRading"
        label="事故分级"
        :show="form.ProcessClassification == 'B' || form.ProcessClassification=='A'"
        v-model="form.AttidentgRading"
        :dataSource="form.AttidentgRadingList"
        direction="horizontal"
        readonly
      >
      </eagle-radio-group>
      <eagle-radio-group
        name="PotentialRisk"
        label="潜在风险"
        v-model="form.PotentialRisk"
        :dataSource="form.PotentialRiskList"
        direction="horizontal"
        readonly
      >
      </eagle-radio-group>
      <eagle-input
        label="外部协助"
        v-model="form.ExternalAssistance"
        readonly
        type="textarea"
        rows="1"
        autosize
      />
      <div class="report-block">
        <van-list style="margin: 0px">
          <van-cell
            style="margin-top: 0px;padding-left: 0px;"
            class="cell-item"
            v-for="(item, index) in form.AuditData"
            :key="index"
          >
            <van-row>
              <van-col
                span="8"
                style="padding-left: 16px;text-align: left;color:#646566"
              >
                {{item.LevelName}}
              </van-col>
              <van-col
                span="16"
                style="padding-left: 10px;"
              >
                {{item.OperateContent}}
              </van-col>
            </van-row>
          </van-cell>
        </van-list>
      </div>
      <!-- <FileUpload @CallBack="_fileUploadCb" :attachs="form.Attachs" :allowEdit="false" :labelName="'附件'" /> -->
      <!-- <eagle-file-upload @CallBack="_fileUploadCb" :attachs="form.Attachs" :allowEdit="false" :labelName="'附件'" /> -->
      <eagle-file-view
        :attachs="form.Attachs"
        :labelName="'附件'"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {},
      edit: false,
      harmArr: [],
    };
  },
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },
  created() {
    let id = this.$route.query.id;
    this.getView1(id);
  },
  methods: {
    isShow(value) {
      if (
        this.form.AttidentClassification &&
        this.form.AttidentClassification.indexOf(value) > -1 &&
        (value != "4" || this.form.ProcessClassification == "A") &&
        (value != "5" || this.form.ProcessClassification == "A") &&
        (value != "7" || this.form.ProcessClassification == "B")
      ) {
        return true;
      }
      return false;
    },
    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },
    getView1(id) {
      const param = {
        id: id,
      };
      var _this = this;
      _this.$axios
        .get("/WhAccidentInitialReport/GetView", { params: param })
        .then((res) => {
          _this.form = res.data;
          if (res.data.Harm != null) {
            _this.harmArr = res.data.Harm.split(",");
          }
          _this.edit = true;
        });
    },
  },
};
</script>

<style lang="less" scpoed>
.wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.report-block {
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
